<template>
<div class="statutory_leave">
  <el-row style="display: flex;">
    <ToolBar :add-data="toAdd" :show-all="false" :show-multiple="false" :show-delete="false" :show-edit="false"></ToolBar>
    <el-form :inline="true" label-width="80px" label-position="right">
      <el-form-item label="节日名称">
        <el-select v-model="statutoryLeave.leaveName"  size="small" @change="handleCurrentChange(1)" clearable>
          <el-option v-for="(item,index) in nameList" :value="item.leaveName" :key="index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row>
    <el-table :data="tableData" border stripe
    :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}"
    >
      <el-table-column label="法假名称" prop="leaveName">
      </el-table-column>
      <el-table-column label="法假年份" prop="leaveYear">
      </el-table-column>
      <el-table-column label="法假日期" prop="leaveDate">
        <template slot-scope="scope">
          <span>
            {{scope.row.leaveDate|formatDateBirth}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>

      </el-table-column>
    </el-table>
  </el-row>
  <div class="block">
    <el-pagination
        hide-on-single-page
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size=currentSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
    </el-pagination>
    <el-drawer size="30%" :visible.sync="drawerVisible" show-close>
      <h4 slot="title">法假管理</h4>
      <el-row style="padding:0 1rem">
        <el-form :model="statutoryLeave"  label-width="80px">
          <el-form-item label="法假名称" >
            <el-input v-model="statutoryLeave.leaveName"></el-input>
          </el-form-item>
          <el-form-item label="法假日期">
            <el-date-picker class="w100"
                type="dates"
                v-model="dates"
                :clearable="false"
                placeholder="选择一个或多个日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="drawerVisible=false,statutoryLeave={}">取消</el-button>
            <el-button type="primary" @click="add">确认</el-button>
          </el-form-item>
        </el-form>
      </el-row>

    </el-drawer>
  </div>

</div>
</template>

<script>
import ToolBar from "@/components/common/ToolBar";
export default {
  name: "FinStatutoryLeave.vue",
  components: {ToolBar},
  data(){
    return{
      currentSize:10,
      currentPage:1,
      total:0,
      nameList:[],
      statutoryLeave:{
        leaveName:null,
      },
      tableData:[],
      drawerVisible:false,
      dates:[]
    }
  },
  created() {
    this.getNameList()
    this.getData()
  },
  methods:{
    getNameList(){
      axios.get("/fin_statutory_leave/list/name").then(res=>{
        if(res.data.success){
          this.nameList=res.data.data
        }
      }).catch(error=>{
        console.log(error)
        this.$tools.showMessage(error,"error")
      })
    },
    getData(){
      axios.post("/fin_statutory_leave/list/"+this.currentPage+"/"+this.currentSize,this.statutoryLeave).then(res=>{
        if(res.data.success){
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          this.pages = res.data.data.pages
        }else{
          this.tableData=[]
          this.total=0
          this.pages=1
        }
      }).catch(error=>{
        this.$tools.showMessage(error,"error")
      })
    },
    handleSizeChange(val){
      this.currentSize=val
      this.getData()
    },
    handleCurrentChange(val){
      this.currentPage=val
      this.getData()

    },
    toAdd(){
      this.dates=[]
      this.drawerVisible=true
    },
    add(){
      console.log(this.dates)
      if(this.statutoryLeave.leaveName==null||this.statutoryLeave.leaveName===''){
        this.$tools.showMessage("请输入法假名称...","error")
        return;
      }
      if(this.dates.length===0){
        this.$tools.showMessage("请选择法假日期...","error")
        return;
      }
      const list=[]
      this.dates.forEach(item=>{
        console.log(item)
        list.push(
            {
              createUserId:this.$store.state.userInfo.id,
              leaveName:this.statutoryLeave.leaveName,
              leaveDate:item,
              leaveYear:item.getFullYear(),
              statutoryLeaveType:"法假"
            }
        )
      })
      console.log(list)
      axios.post("/fin_statutory_leave/add",list).then(res=>{
          if(res.data.success){
            this.$tools.showMessage("添加成功！","success")
            this.getData()
            this.drawerVisible=false
            this.statutoryLeave={}
            this.getNameList()

          }else{

          }
      }).catch(error=>{
        this.$tools.showMessage(error,"error")
      })

    },
    toUpdate(){
    },
    handleEdit(index, row) {
      this.statutoryLeave=row
      this.dates=[]
      this.tableData.forEach(item=>{
        if(item.leaveName===row.leaveName&&item.leaveYear===row.leaveYear){
          this.dates.push(item.leaveDate)
        }
      })
      this.drawerVisible=true
    },
    handleDelete(index, row) {
      this.$tools.showMessageBox("确认删除？","操作提醒","warning").then(confirm=>{
        axios.delete("/fin_statutory_leave/deleteById/"+row.id).then(res=>{
          if(res.data.success){
            this.$tools.showMessage("删除成功","success")
            this.getData()
          }
        })
      }).catch(cancel=>{

      })
    }
  }
}
</script>

<style scoped>

</style>
